<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color: #000;
      opacity: 1;
      background: rgba(0, 0, 0, 0.2);
    }

    .swiper-pagination-bullet-active {
      color: #fff;
      background: #007aff;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img
          src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/335443eb668e827860bfb4fb6cc65cf0.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080">
      </div>
      <div class="swiper-slide"><img
          src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f092886271b0821e7b6f665e3d39958.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440">
      </div>
      <div class="swiper-slide"><img
          src="https://k.sinaimg.cn/www/IT/cr/2010/1021/4046709137.jpg/w700h350z1l10t1010c.jpg"></div>
      <div class="swiper-slide"><img
          src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aa9636d1d186fd6e7131bd66f73dc2ae.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080">
      </div>
      <div class="swiper-slide"><img src="https://p1.ssl.qhimg.com/t01fb99363518bf066d.jpg"></div>
      <div class="swiper-slide"><img
          src="https://n.sinaimg.cn/sinakd10112/763/w1000h1363/20200928/f229-izrvxmh6343132.jpg"></div>
      <div class="swiper-slide"><img
          src="https://n.sinaimg.cn/sinakd10109/209/w1080h729/20200505/f8a3-iteyfwv1952910.jpg"></div>
      <div class="swiper-slide"><img
          src="https://video.kts.g.mi.com/ktv_1270322523_SHdtMTIxMWhtNXRxWnFlVHZFbTc5QT09_1610697722527.jpeg"></div>
      <div class="swiper-slide"><img src="https://img.3dmgame.com/uploads/allimg/180118/153_180118142511_5.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
        speed:2000,
        clickable: true,
        autoplay: true,
        delay:3000,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
      },
    });
  </script>
</body>

</html>